<template>
  <div class="center-top box">
    <!-- 标题部分 -->
    <aside>
      <h1 class="left-title">
        事件总数
        <span>(个)</span>
        <i>15</i>
      </h1>
      <!-- 内容部分 -->
      <section style="display:flex;align-items: flex-start">
        <!--    左    -->
        <div class="section-left">
          <div v-for="(item,index) in data.itemList" class="section-item" :key="index">
            <i class="icon-square"></i>
            <div class="section-dec">
              <p>{{ item.title }}</p>
              <p>{{ item.value }}</p>
            </div>
          </div>
        </div>
      </section>
    </aside>
    <!--    右    -->
    <div class="section-right">
      <div class="flex">
        <img class="section-img red-warning" src="@/assets/images/redWarnImg.png" alt="">
        <div class="section-dec">
          <p class="section-dec-font font-red">{{ data.warningList[0].value }}</p>
          <p class="section-dec-title">{{ data.warningList[0].title }}</p>
        </div>
      </div>
      <div class="flex">
        <img class="section-img" src="@/assets/images/blueWarnImg.png" alt="">
        <div class="section-dec">
          <p class="section-dec-font font-blue">{{ data.warningList[1].value }}</p>
          <p class="section-dec-title">{{ data.warningList[1].title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    data:{
      type:Object,
      defalut(){
        return {
          itemList:[],
          warningList:[]
        }
      }
    }
  },
  data() {
    return {
    }
  }
};
</script>

<style lang="scss" scoped>
// 大框
.center-top {
  height: 16%;
  display: flex;
  padding: 20px ;
  width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(7,12,97,1);
  background-color: rgba(7,12,97,.3);
  
  aside {

    width: 62%;
    border-right: 1px solid rgba(54, 94, 255, 0.10);
    display: flex;
    flex-direction: column;
      justify-content: space-between;
  }

  //   标题部分
  .left-title {
    // font-size: 28px !important;
    margin-bottom: 1rem;
    // 个数
    span {
      margin: 0 20px;
      font-size: 1rem;
    }

    // 数量
    i {
      font-style: normal;
      font-size: 1.875rem;
      color: #00f5f1;
    }
  }

}

.section-left {
  width: 100%;
}

.section-right {
  width: 38%;
  margin: 0 !important;
}

.section-left, .section-right {
  margin: 5px;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.section-item {
  width: 33%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 1.25rem;
  & .section-dec {
    p {
      text-align: left;
      line-height: 30px;
      font-size:1.125rem
    }
  }

  &:nth-of-type(1) {
    border-right: 1px solid rgba(54, 94, 255, 0.10);

    .icon-square {
      background: #FF3535 !important;
    }
  }

  &:nth-of-type(2) {
    border-right: 1px solid rgba(54, 94, 255, 0.10);

    .icon-square {
      background: #FACC29 !important;
    }
  }

  &:nth-of-type(3) {
    border-right: 1px solid rgba(54, 94, 255, 0.10);

    .icon-square {
      background: #00E1E4 !important;
    }
  }

  &:nth-of-type(4) .icon-square {
    background: #365EFF !important;
  }

  .icon-square {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-top: 10px;
    margin-right: 10px;
  }
}

.section-img {
  width: 8rem;
}

.section-dec-font{
font-size:1.375rem;
  font-weight:600
}
.section-dec-title{
  font-size:1rem;
  margin-top:20px;
}
.red-warning{
animation: moveit 1.5s infinite ;
}
@keyframes moveit {
0%{}
50%{
  transform: translateY(-20px) scale(1.2) rotateY(30deg);
}
100%{

}
}
</style>
